<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- modal模态框 -->
    <div class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改学员信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        x
                    </button>
                </div>
                <div class="modal-body">
                    <form class="saveForm">
                        <div>
                            <div class="col">
                                <p style="margin-bottom: 5px;"><b>姓名：</b></p>
                                <input type="text" name="sname" class="form-control" placeholder="姓名">
                            </div>
                            <div class="col">
                                <p style="margin-bottom: 5px;"><b>学科：</b></p>
                                <input type="text" name="subject" class="form-control" placeholder="学科">
                            </div>
                            <div class="col">
                                <p style="margin-bottom: 5px;"><b>年龄：</b></p>
                                <input type="text" name="sage" class="form-control" placeholder="年龄">
                            </div>
                            <div class="col">
                                <p style="margin-bottom: 5px;"><b>性别：</b></p>
                                <input type="text" name="sgender" class="form-control" placeholder="性别">
                            </div>
                            <div class="col">
                                <p style="margin-bottom: 5px;"><b>学历：</b></p>
                                <input type="text" name="qualifications" class="form-control" placeholder="学历">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 表头 -->
    <header>
        <h1>
            <a href="javascript:;"><img src="./image/logo.png" alt=""></a>
        </h1>
        <h2>博学谷学员信息管理系统</h2>
    </header>

    <!-- 添加栏 -->
    <form class="form">
        <div class="row">
            <div class="col">
                <input type="text" name="sname" class="form-control" placeholder="姓名" aria-label="First name">
            </div>
            <div class="col">
                <input type="text" name="subject" class="form-control" placeholder="学科" aria-label="Last name">
            </div>
            <div class="col">
                <input type="text" name="sage" class="form-control" placeholder="年龄" aria-label="First name">
            </div>
            <div class="col">
                <input type="text" name="sgender" class="form-control" placeholder="性别" aria-label="Last name">
            </div>
            <div class="col">
                <input type="text" name="qualifications" class="form-control" placeholder="学历" aria-label="First name">
            </div>
            <div class="col">
                <button type="button" class="btn btn-success">添加</button>
            </div>
        </div>
    </form>

    <!-- 表格 学员信息-->
    <table class="table table-bordered table-hover">
        <thead>
            <tr class="table-primary">
                <th scope="col">序号</th>
                <th scope="col">姓名</th>
                <th scope="col">学科</th>
                <th scope="col">年龄</th>
                <th scope="col">性别</th>
                <th scope="col">学历</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <th scope="row">1</th>
                <td>张三</td>
                <td>Java</td>
                <td>24</td>
                <td>男</td>
                <td>本科</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>李四</td>
                <td>UI</td>
                <td>20</td>
                <td>女</td>
                <td>大专</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>王五</td>
                <td>前端</td>
                <td>25</td>
                <td>女</td>
                <td>本科</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr>
            <tr>
                <th scope="row">4</th>
                <td>赵六</td>
                <td>产品</td>
                <td>30</td>
                <td>男</td>
                <td>本科</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr>
            <tr>
                <th scope="row">5</th>
                <td>张龙</td>
                <td>测试</td>
                <td>18</td>
                <td>女</td>
                <td>高中</td>
                <td>
                    <button type="button" class="btn btn-danger">删除</button>
                    <button type="button" class="btn btn-primary">编辑</button>
                </td>
            </tr> -->
        </tbody>
    </table>

    <script src="./js/form-serialize.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>